<!-- BEGIN: ACCORDION DEMO -->
<div class="toolbar">
    <div class="page-bar">
        <ul class="page-breadcrumb float-right">
            <li>
                <i class="fa fa-home"></i>
                <a [routerLink]="['/index/home']">管理中心</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a [routerLink]="['/index/ads']">广告管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:;">{{appServ.pageTitle}}</a>
            </li>
        </ul>
        <h1 class="page-title"> <i class="icon-note font-green-sharp"></i> {{appServ.pageTitle}}</h1>
    </div>
</div>

<div class="dataform">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" role="form" novalidate>
        <input type="hidden" ng-model="data.Id">
        <div class="form-body">
            <div class="form-group row">
                <label for="Title" class="col-2 col-form-label">标题:</label>
                <div class="col-10">
                    <input type="text" [(ngModel)]="dataInfo.Title" name="Title" minlength="2" maxlength="255" class="form-control" placeholder="标题" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="Url" class="col-2 col-form-label">URL地址:</label>
                <div class="col-4">
                    <input type="text" [(ngModel)]="dataInfo.Url" name="Url" minlength="2" maxlength="255" class="form-control" placeholder="URL地址">
                </div>
                <label for="RedirectUrl" class="col-2 col-form-label">广告分组:</label>
                <div class="col-4">
                    <select name="GroupKey" class="form-control" [(ngModel)]="dataInfo.GroupKey">
                        <option *ngFor="let item of AdsGroups" [value]="item.Value">{{item.Title}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="RedirectUrl" class="col-2 col-form-label">图片:</label>
                <div class="col-6">
                    <div class="input-group">
                        <input type="text" class="form-control input-medium" [(ngModel)]="dataInfo.Image" name="Logo" id="Logo" placeholder="可以直接填写Url地址" />
                        <div class="btn-group">
                            <file-upload (fileSelect)="fileSelect($event)" [fileType]="'image/*'" [fileTypeErr]="'上传文件类型不正确'" [fileMaxSize]="'500KB'" [fileMaxSizeErr]="'文件太大了'">
                                <button class="btn blue" type="button"><i class="icon-picture"></i> 选择图片 </button>
                            </file-upload>
                            <button type="button" class="btn green" name="btnPreviewLogo" (click)="imgPreview.toggle($event)" *ngIf="dataInfo.Image"> <i class="icon-eye"></i> 预览 </button>
                            <button type="button" class="btn btn-danger" name="btnClearLogo" *ngIf="dataInfo.Image" (click)="dataInfo.Image=''"> <i class="icon-trash"></i> 清除 </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="RedirectUrl" class="col-2 col-form-label">内容:</label>
                <div class="col-10">
                    <div class="portlet light bordered">
                        <codemirror #content="ngModel" name="content" [(ngModel)]="dataInfo.Content" [config]="config"></codemirror>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="RedirectUrl" class="col-2 col-form-label">排序:</label>
                <div class="col-4">
                    <input type="number" min="0" max="10000" [(ngModel)]="dataInfo.OrderID" name="OrderID" minlength="1" maxlength="5" class="form-control" placeholder="排序" />
                </div>
                <label for="RedirectUrl" class="col-2 col-form-label">状态:</label>
                <div class="col-4">
                    <div class="mt-radio-inline">
                        <label class="mt-radio mt-radio-outline">
                        <input type="radio" name="Status" id="Status" [value]="0" checked> 显示
                        <span></span>
                    </label>
                        <label class="mt-radio mt-radio-outline">
                        <input type="radio" name="Status" id="Status" [value]="1"> 不显示
                        <span></span>
                    </label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">描述:</label>
                <div class="col-10">
                    <textarea name="Describe" maxlength="255" id="Describe" [(ngModel)]="dataInfo.Describe" placeholder="描述" class="form-control" rows="3"></textarea>
                </div>
            </div>

        </div>
        <div class="form-actions">
            <hr/>
            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn green" (click)="dataSave()" [disabled]="!editForm.form.valid"> <span class="fa fa-save"></span> 保存</button>
                </div>
            </div>
        </div>
    </form>

</div>

<p-overlayPanel #imgPreview appendTo="body">
    <div class="imgPreview">
        <img [src]="dataInfo.Image" class="img-fluid" />
    </div>
</p-overlayPanel>